<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="DATAisUS Admin Panel" />
    <meta name="author" content="" />

    <title>Trade Monitor</title>

    <link rel="stylesheet" href="<c:url value="/assets/js/jquery-ui/css/no-theme/jquery-ui-1.10.3.custom.min.css" />" />
    <link rel="stylesheet" href="<c:url value="/assets/css/font-icons/entypo/css/entypo.css" />" />
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic">/>
    <link rel="stylesheet" href="<c:url value="/assets/css/bootstrap.css" />"/>
    <link rel="stylesheet" href="<c:url value="/assets/css/neon-core.css" />"/>
    <link rel="stylesheet" href="<c:url value="/assets/css/neon-theme.css" />"/>
    <link rel="stylesheet" href="<c:url value="/assets/css/neon-forms.css" />"/>
    <link rel="stylesheet" href="<c:url value="/assets/css/custom.css" />"/>
    <link rel="stylesheet" href="<c:url value="/assets/css/white.css" />"/>
    <link rel="stylesheet" href="<c:url value="/assets/css/override.css" />"/>
    <link rel="stylesheet" href="<c:url value="/assets/css/fonts.css" />"/>
    <style type="text/css"></style>

    <script src="<c:url value="/assets/js/jquery-1.11.0.min.js" />" ></script>
    <script type="text/javascript">
        function toggleFullScreen() {
			if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled || document.mozFullScreenEnabled) {
				 if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
					  (!document.mozFullScreen && !document.webkitIsFullScreen && !document.msFullscreenElement)) {               
					if (document.documentElement.requestFullScreen) {
					  document.documentElement.requestFullScreen();
					} else if (document.documentElement.mozRequestFullScreen) {
					  document.documentElement.mozRequestFullScreen();
					} else if (document.documentElement.webkitRequestFullScreen) {
					  document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
					} else if (this.msRequestFullscreen) {
						this.msRequestFullscreen();
					}
				  } else {
					if (document.cancelFullScreen) {
					  document.cancelFullScreen();
					} else if (document.mozCancelFullScreen) {
					  document.mozCancelFullScreen();
					} else if (document.webkitCancelFullScreen) {
					  document.webkitCancelFullScreen();
					}else if (document.msExitFullscreen) {
					  document.msExitFullscreen();
					} 
				  }	  
			} else {
			  alert("Your browser does not support the fullscreen API.");
			}
		}
        </script>

    <script type="text/javascript">
      $( document ).ready(function() {
        $(".dropdown dt a").on('click', function () {
          //$("ul.filter-dropdown").hide();
          var currentDD = $(this).parents('.dropdown');

          if (currentDD.find("ul.filter-dropdown").is(":visible")) {
            $("ul.filter-dropdown").hide();
            //currentDD.find("ul.filter-dropdown").hide();
          } else {
            currentDD.find("ul.filter-dropdown").slideToggle('fast');
          }
          
        });

        $(document).bind('click', function (e) {
          var $clicked = $(e.target);
          if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
        }); 

      });
      </script>

    <!--[if lt IE 9]><script src="<c:url value="/assets/js/ie8-responsive-file-warning.js" />"</script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!--- - jqwidgets CSS & JS Files- -->

    <link rel="stylesheet" href="<c:url value="/assets/jqwidgets/styles/jqx.base.css" />" type="text/css" />
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxcore.js" />" ></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxdata.js" />" ></script> 
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxbuttons.js" />" ></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxscrollbar.js" />" ></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxcheckbox.js" />" ></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxlistbox.js" />" ></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxdropdownlist.js" />" ></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxmenu.js" />" ></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxgrid.js" />" ></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxgrid.sort.js" />" ></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxinput.js" />" ></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxgrid.pager.js" />" ></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxgrid.selection.js" />" ></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxgrid.filter.js" />"></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxpanel.js" />" ></script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxgrid.grouping.js" />" ></script>    
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxgrid.columnsresize.js" />" ></script> 
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxgrid.columnsreorder.js" /> "> </script>
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxdata.export.js" />" ></script> 
    <script type="text/javascript" src="<c:url value="/assets/jqwidgets/jqxgrid.export.js" />" ></script> 
    <script type="text/javascript" src="<c:url value="/assets/scripts/demos.js" />" ></script>
    <script type="text/javascript" src="<c:url value="/assets/js/common.js" />"></script>
    
        
       <script type="text/javascript" src="<c:url value="/assets/scripts/knockout-3.0.0.js" />"></script>
    <script type="text/javascript">
     //var baseUrl = '../EZOPSDashboardUI';
       
        $(document).ready(function () {
            
            // prepare the data
            var source =
            {
                dataType: "csv",
                dataFields: [
                     { name: 'clientTradeId', type: 'string' },
                     { name: 'clientTransactionId', type: 'string' },
                     { name: 'client', type: 'string' },
                     { name: 'transactionType', type: 'string' },
                     { name: 'recordType', type: 'string' },
                     { name: 'fund', type: 'string' },
                     { name: 'source', type: 'string' },
                     { name: 'manager', type: 'string' },
                     { name: 'ezId', type: 'string' },
                     { name: 'ezStatus', type: 'string' },
                     { name: 'altId', type: 'string' },
                     { name: 'batchId', type: 'string' },
                     { name: 'datetime', type: 'string' },
                     { name: 'securityType', type: 'string' },
                     { name: 'type', type: 'string' },
                     { name: 'orchestradeStatus', type: 'string' },
                     { name: 'otId', type: 'string' },
                     { name: 'confirmed', type: 'string' },
                     { name: 'orchestradeComment', type: 'string' },
                     { name: 'exchangeStatus', type: 'string' },
                     { name: 'exchangeId', type: 'string' },
                     { name: 'exchangeComment', type: 'string' },
                     { name: 'adminTradeStatus', type: 'string' },
                     { name: 'adminId', type: 'string' },
                     { name: 'adminComment', type: 'string' }
                ], 
                url: 'assets/sampledata/TradeMonitor.csv'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {
                    // data is loaded.
                }
            });
            
            var cellClass = function (row, dataField, cellText, rowData) {
                var cellValue = rowData[dataField];
                switch (dataField) {
                    case "orchestradeStatus":
                        if (cellValue =="PASS") {
                            return "max";                            
                        }
                        if (cellValue =="FAIL") {
                            return "minavg";
                        }                        
                        return "max";
                    case "ezStatus":
                        if (cellValue =="PASS") {
                            return "max";                            
                        }
                        if (cellValue =="FAIL") {
                            return "minavg";
                        }                        
                        return "max";
                    case "adminTradeStatus":
                        if (cellValue =="PASS") {
                            return "max";                            
                        }
                        if (cellValue =="FAIL") {
                            return "minavg";
                        }                        
                        return "max";                    
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });

            // create jqxDataTable.
            $("#jqxgrid").jqxGrid(
            {
                source: source,
                width: '99%',
                height: '400',
               // autorowheight: true,
               // autoheight: true,
                pageable:false,
                filterable: true,
                selectionmode: 'multiplecellsextended',
                altRows: true,
                groupable: true,
                columnsresize: true,
                columnsreorder: true,
                sortable: true,
                              
             
                columns: [
                  { text: 'Client Trade ID', cellsAlign: 'center',align: 'center', dataField: 'clientTradeId', pinned: true,  width: '150px' },
                  { text: 'Client Transaction ID', cellsAlign: 'center', align: 'center', dataField: 'clientTransactionId',pinned: true, width: '150px' },
                  { text: 'Client', dataField: 'client', cellsformat: 'd', cellsAlign: 'center', align: 'center',pinned: true, width: '100px' },
                  { text: 'Transaction Type', dataField: 'transactionType', cellsformat: 'c2', align: 'center',pinned: true, cellsAlign: 'center', width: '130px' },
                  { text: 'Record Type', cellsAlign: 'center',  align: 'center', dataField: 'recordType', width: '100px' },
                  { text: 'Fund', cellsAlign: 'center',  align: 'center', dataField: 'fund', width: '100px' },
                  { text: 'Source', cellsAlign: 'center',  align: 'center', dataField: 'source', width: '100px' },
                  { text: 'Manager', cellsAlign: 'center', align: 'center', dataField: 'manager', width: '80px' },
                  { text: 'EZ ID ', cellsAlign: 'center',  align: 'center', dataField: 'ezId',  width: '70px' },
                  { text: 'EZ Status', cellsAlign: 'center',  align: 'center', dataField: 'ezStatus', cellClassName: cellClass, width: '80px' },
                  { text: 'Alt ID', cellsAlign: 'center',  align: 'center', dataField: 'altId', width: '120px' },
                  { text: 'Batch ID', cellsAlign: 'center',  align: 'center', dataField: 'batchId', width: '100px' },
                  { text: 'Date & Time', cellsAlign: 'center',  align: 'center', dataField: 'datetime', width: '100px' },
                  { text: 'Security Type', cellsAlign: 'center',  align: 'center', dataField: 'securityType', width: '130px' },
                  { text: 'Type', cellsAlign: 'center',  align: 'center', dataField: 'type', width: '100px' },
                  { text: 'Trade Status', cellsAlign: 'center', class: 'xs', columngroup: 'Orchestrade',  align: 'center', dataField: 'orchestradeStatus', cellClassName: cellClass, width: '100px' },
                  { text: 'OT ID', cellsAlign: 'center', columngroup: 'Orchestrade',  align: 'center', dataField: 'otId', width: '100px' },
                  { text: 'Confirmed', cellsAlign: 'center', columngroup: 'Orchestrade',  align: 'center', dataField: 'confirmed', width: '100px' },
                  { text: 'Comment', cellsAlign: 'center', columngroup: 'Orchestrade',  align: 'center', dataField: 'orchestradeComment', width: '100px' },
                  { text: 'Exchange Status', cellsAlign: 'center', columngroup: 'Orchestrade',  align: 'center', dataField: 'exchangeStatus', width: '120px' },
                  { text: 'Exchange ID', cellsAlign: 'center', columngroup: 'Orchestrade',  align: 'center', dataField: 'exchangeId', width: '100px' },
                  { text: 'Exchange Comment', cellsAlign: 'center', columngroup: 'Orchestrade',  align: 'center', dataField: 'exchangeComment', width: '150px' },
                  { text: 'Trade Status', cellsAlign: 'center', columngroup: 'FUNDADMIN',  align: 'center', dataField: 'adminTradeStatus', cellClassName: cellClass,  width: '100px' },
                  { text: 'Admin ID', cellsAlign: 'center', columngroup: 'FUNDADMIN',  align: 'center', dataField: 'adminId', width: '100px' },
                  { text: 'Comment', cellsAlign: 'center', columngroup: 'FUNDADMIN',  align: 'center', dataField: 'adminComment', width: '100px' }
                ],
                groups: ['fund'],
               
                columnGroups: 
                [
                  { text: 'Orchestrade', align: 'center',  name: 'Orchestrade' },
                  { text: 'Fund Admin', align: 'center', name: 'FUNDADMIN'}
                ]

            });                       
            
            var Droplist = [
                { label: 'Client Trade ID', value: 'clientTradeId', checked: true },
                { label: 'Client Transaction ID', value: 'clientTransactionId', checked: true }, 
                { label: 'Client', value: 'client', checked: true }, 
                { label: 'Transaction Type', value: 'transactionType', checked: true }, 
                { label: 'Record Type', value: 'recordType', checked: true }, 
                { label: 'Fund', value: 'fund', checked: true }, 
                { label: 'Source', value: 'source', checked: true }, 
                { label: 'Manager', value: 'manager', checked: true }, 
                { label: 'EZ ID', value: 'ezId', checked: true }, 
                { label: 'EZ Status', value: 'ezStatus', checked: true }, 
                { label: 'Alt ID', value: 'altId', checked: true }, 
                { label: 'Batch ID', value: 'batchId', checked: true }, 
                { label: 'Date & Time', value: 'datetime', checked: true }, 
                { label: 'Security Type', value: 'securityType', checked: true }, 
                { label: 'Type', value: 'type', checked: true }, 
                { label: 'Trade Status', value: 'orchestradeStatus', checked: true }, 
                { label: 'OT ID', value: 'otId', checked: true }, 
                { label: 'Confirmed', value: 'confirmed', checked: true }, 
                { label: 'Comment', value: 'orchestradeComment', checked: true }, 
                { label: 'Exchange Status', value: 'exchangeStatus', checked: true }, 
                { label: 'Exchange ID', value: 'exchangeId', checked: true }, 
                { label: 'Exchange Comment', value: 'exchangeComment', checked: true }, 
                { label: 'Trade Status', value: 'adminTradeStatus', checked: true }, 
                { label: 'Admin ID', value: 'adminId', checked: true }, 
                { label: 'Comment', value: 'adminComment', checked: true }
            ];
            $("#jqxDroplist").jqxDropDownList({ checkboxes: true, source: Droplist,  width: 200, height: 25});
            $("#jqxDroplist").jqxDropDownList('checkIndex', 0);
            $("#jqxWidget").on('checkChange', function (event) {
                $("#jqxgrid").jqxGrid('beginUpdate');
                if (event.args.checked) {
                    $("#jqxgrid").jqxGrid('showColumn', event.args.value);
                }
                else {
                    $("#jqxgrid").jqxGrid('hideColumn', event.args.value);
                }
                $("#jqxgrid").jqxGrid('endUpdate');
            });                    
            $("#excelExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');           
            });
            $("#xmlExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'xml', 'jqxGrid');
            });
            $("#csvExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'csv', 'jqxGrid');
            });

            // create jqxDataTable.
            $("#jqxgridsummery").jqxGrid(
            {
                source: source,
                width: '99%',
                height: '600',
                pageable:false,
                filterable: true,
                selectionmode: 'multiplecellsextended',
                altRows: true,
                groupable: true,
                columnsresize: true,
                columnsreorder: true,
                sortable: true,
                              
             
                columns: [
                  { text: 'Client Trade ID', cellsAlign: 'center',align: 'center', dataField: 'clientTradeId', pinned: true,  minwidth: '150px' },
                  { text: 'Client Transaction ID', cellsAlign: 'center', align: 'center', dataField: 'clientTransactionId',pinned: true, minwidth: '150px' },
                  { text: 'Client', dataField: 'client', cellsformat: 'd', cellsAlign: 'center', align: 'center',pinned: true, minwidth: '100px' },
                  { text: 'Fund', cellsAlign: 'center',  align: 'center', dataField: 'fund', width: '150px' },
                  { text: 'EZ ID ', cellsAlign: 'center',  align: 'center', dataField: 'ezId',  minwidth: '70px' },
                  { text: 'EZ Status', cellsAlign: 'center',  align: 'center', dataField: 'ezStatus', cellClassName: cellClass, width: '80px' },
                  { text: 'Batch ID', cellsAlign: 'center',  align: 'center', dataField: 'batchId', width: '100px' },
                  { text: 'Date & Time', cellsAlign: 'center',  align: 'center', dataField: 'datetime', width: '100px' },
                  { text: 'Trade Status', cellsAlign: 'center', class: 'xs', columngroup: 'Orchestrade',  align: 'center', dataField: 'orchestradeStatus', cellClassName: cellClass, width: '100px' },
                  { text: 'Confirmed', cellsAlign: 'center', columngroup: 'Orchestrade',  align: 'center', dataField: 'confirmed', minwidth: '100px' },
                  { text: 'Exchange Status', cellsAlign: 'center', columngroup: 'Orchestrade',  align: 'center', dataField: 'exchangeStatus', minwidth: '120px' },
                  { text: 'Trade Status', cellsAlign: 'center', columngroup: 'FUNDADMIN',  align: 'center', dataField: 'adminTradeStatus', cellClassName: cellClass,  minwidth: '100px' }
                ],
               
                columnGroups: 
                [
                  { text: 'Orchestrade', align: 'center',  name: 'Orchestrade' },
                  { text: 'Fund Admin', align: 'center', name: 'FUNDADMIN'}
                ]

            });
            var Droplistsummery = [
                { label: 'Client Trade ID', value: 'clientTradeId', checked: true },
                { label: 'Client Transaction ID', value: 'clientTransactionId', checked: true }, 
                { label: 'Client', value: 'client', checked: true }, 
                { label: 'Transaction Type', value: 'transactionType', checked: true }, 
                { label: 'Record Type', value: 'recordType', checked: true }, 
                { label: 'Fund', value: 'fund', checked: true }, 
                { label: 'Source', value: 'source', checked: true }, 
                { label: 'Manager', value: 'manager', checked: true }, 
                { label: 'EZ ID', value: 'ezId', checked: true }, 
                { label: 'EZ Status', value: 'ezStatus', checked: true }, 
                { label: 'Alt ID', value: 'altId', checked: true }, 
                { label: 'Batch ID', value: 'batchId', checked: true }, 
                { label: 'Date & Time', value: 'datetime', checked: true }, 
                { label: 'Security Type', value: 'securityType', checked: true }, 
                { label: 'Type', value: 'type', checked: true }, 
                { label: 'Trade Status', value: 'orchestradeStatus', checked: true }, 
                { label: 'OT ID', value: 'otId', checked: true }, 
                { label: 'Confirmed', value: 'confirmed', checked: true }, 
                { label: 'Comment', value: 'orchestradeComment', checked: true }, 
                { label: 'Exchange Status', value: 'exchangeStatus', checked: true }, 
                { label: 'Exchange ID', value: 'exchangeId', checked: true }, 
                { label: 'Exchange Comment', value: 'exchangeComment', checked: true }, 
                { label: 'Trade Status', value: 'adminTradeStatus', checked: true }, 
                { label: 'Admin ID', value: 'adminId', checked: true }, 
                { label: 'Comment', value: 'adminComment', checked: true }
            ];
            $("#jqxDroplistsummery").jqxDropDownList({ checkboxes: true, source: Droplistsummery,  width: 200, height: 25});
            $("#jqxDroplistsummery").jqxDropDownList('checkIndex', 0);
            $("#jqxWidgetsummery").on('checkChange', function (event) {
                $("#jqxgridsummery").jqxGrid('beginUpdate');
                if (event.args.checked) {
                    $("#jqxgridsummery").jqxGrid('showColumn', event.args.value);
                }
                else {
                    $("#jqxgridsummery").jqxGrid('hideColumn', event.args.value);
                }
                $("#jqxgridsummery").jqxGrid('endUpdate');
            });
                       
            $("#excelExportsummery").click(function () {
                $("#jqxgridsummery").jqxGrid('exportdata', 'xls', 'jqxGrid');           
            });
            $("#xmlExportsummery").click(function () {
                $("#jqxgridsummery").jqxGrid('exportdata', 'xml', 'jqxGrid');
            });
            $("#csvExportsummery").click(function () {
                $("#jqxgridsummery").jqxGrid('exportdata', 'csv', 'jqxGrid');
            });      
        });
    </script>


</head>
<body class="page-body" onLoad="loadForms()">

    <div class="page-container white page-left-in">
      <div class="sidebar-menu">  
            <header class="logo-env">
                <div class="logo">
                    <a href="<c:url value="/dashboard" />">
                        <img src="<c:url value="/assets/images/logo.png" />" width="120" alt="" />
                    </a>
                </div>  
                <div class="sidebar-collapse">
                    <a href="#" class="sidebar-collapse-icon with-animation">
                        <i class="entypo-menu"></i>
                    </a>
                </div>
                <div class="sidebar-mobile-menu visible-xs">
                    <a href="#" class="with-animation">
                        <i class="entypo-menu"></i>
                    </a>
                </div>
            </header>

            <div class="sidebar-user-info">
                 <span  class="user-link">
                        	 <a href=""  data-target="#profilePicModal" data-toggle="modal" title="Change Image">
                       				 <i class="entypo-cog right"></i>
                              </a>
                              <img src="<c:url value="/assets/images/${pic}"/>" alt="" width="44px" height="44px" class="img-circle" />
                         
                            <span>Welcome,</span>
                            <strong>${user}</strong>
                        </span>
            </div>
            
            <ul id="main-menu" >
                <li id="search" class="">
                    <form action="" method="get">
                        <input type="text" placeholder="Search something..." class="search-input" name="q">
                        <button type="submit">
                            <i class="entypo-search"></i>
                        </button>
                    </form>
                </li>
                 <!-- ko foreach: pageList -->
				 <!-- <li data-bind="css : { 'active' : ko.toJS(fileName)=='validationRule'}">
                        <a data-close-others="true" class="dropdown-toggle"
                        	data-bind="attr : { 'href' : ezopsContextPath+'/'+ko.toJS(fileName)}"
                        >
                            <i class="entypo-gauge"></i>
                            <span data-bind="text : resourceId"></span>
                        </a>
				</li> -->
				<!-- /ko -->
				<jsp:include page="mainMenus.jsp"/>
                   	<!--  <li>
                            <a href="#" data-target="#reportModal" data-toggle="modal" class="">
                           <i class="entypo-gauge"></i> File Management
                            </a>
                  </li> -->  
                    </ul>  
                            </div>
        
       
        <div class="main-content">   
        <div class="row">
            
            <!-- Profile Info and Notifications -->
            <div class="col-md-6 col-sm-8 ">                
                           </div>
            
            <div class="col-md-6 col-sm-4 ">
                
                <ul class="list-inline links-list pull-right">
                    <li>
                        <a href="" class="disabled">
                        <i class="entypo-cog right"></i>
                       User Preferences 
                        </a>
                    </li>
                           
                    
                    <li>
                        <a href="<c:url value="/" />">
                            Log Out <i class="glyphicon glyphicon-off  right"></i>
                        </a>
                    </li>
                </ul>
                
            </div>
    
        </div>
        <hr/>         
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-lg-12">
                            <!--   file status table Trade  -->
                            <div class="panel panel-default panel-big">
                                <div class="panel-heading">
                                    <div class="panel-title">
                                        <strong> Trade Monitor </strong> 
                                        <div class="pull-right ">
                                            <!-- <select class="form-control viewdropdown">
                                                <option>Summery View</option>
                                                <option>Pass/Fail View</option>
                                                <option>Save This View</option>
                                            </select> -->
                                            <!-- <button class="SaveView btn btn-default pull-left " style="margin:0 10px 0 0 !important;" type="button" href="#">Save This View</button>
                                            <div class="pull-right">
                                              <select class="form-control viewdropdown">
                                                <option>Summary View</option>
                                                <option>Pass/Fail View</option>
                                            </select> 
                                            </div> -->
                                                                                     
                                            <!-- <div class="btn-group">
                                              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                                Action <span class="caret"></span>
                                              </button>
                                              <ul class="dropdown-menu" role="menu">
                                                <li><a class="SummeryView" href="#">a</a></li>
                                                <li><a class="PassView" href="#">Pass/Fail View</a></li>
                                              </ul>
                                            </div> -->
                                        </div>                                        
                                    </div>
                                </div>
                                <!-- /.panel-heading -->
                                <div class="panel-body">
                                    <div id='jqxWidget' >                                        
                                        <div style="float:Right; margin:0 1% 10px 10px; " id="jqxDroplist"></div>
                                        <div style='clear:both;'>
                                        	 <!-- <div class="exporticon-panel" style='margin:0 1% 10px 10px;'>
                                                <label>Export</label>
                                                <a class="btn btn-primary btn-sm btn-icon icon-left" href="#" id='excelExport' >
                                                    <i class="entypo-doc-text"></i> Excel 
                                                </a>
                                                <a class="btn btn-orange btn-sm btn-icon icon-left" href="#" id='csvExport' >
                                                    <i class="entypo-doc-text-inv"></i> CSV 
                                                </a>
                                                <a class="btn btn-red btn-sm btn-icon icon-left" href="#" id='xmlExport' >
                                                    <i class="entypo-newspaper"></i> XML 
                                                </a>
                                            </div> -->
                                            <!-- <div class="importicon-panel" style='margin:0 1% 10px 10px;'>
                                                <label>Import</label>
                                                <a class="btn btn-orange btn-sm btn-icon icon-left" href="#" id='csvImport' data-target="#uploadCSVModal" data-toggle="modal">
                                                    <i class="entypo-doc-text-inv"></i> CSV 
                                                </a>
                                            </div> -->                                            
                                        </div>                                            
                                        <div id="jqxgrid" style="margin-top: 20px; clear:both; " ></div> 
                                    </div> 
                                    <div id='jqxWidgetsummery' style="display:none;">
                                        <div style="float:Right; margin:0 1% 10px 10px; " id="jqxDroplistsummery"></div>
                                        <div style='clear:both;'>
                                            <div class="exporticon-panel" style='margin:0 1% 10px 10px;'>
                                                <label>Export</label>
                                                <a class="btn btn-primary btn-sm btn-icon icon-left" href="#" id='excelExportsummery' >
                                                    <i class="entypo-doc-text"></i> Excel 
                                                </a>
                                                <a class="btn btn-orange btn-sm btn-icon icon-left" href="#" id='csvExportsummery' >
                                                    <i class="entypo-doc-text-inv"></i> CSV 
                                                </a>
                                                <a class="btn btn-red btn-sm btn-icon icon-left" href="#" id='xmlExportsummery' >
                                                    <i class="entypo-newspaper"></i> XML 
                                                </a>
                                            </div>
                                        </div>
                                      <div id="jqxgridsummery" style="margin-top: 20px; clear:both; " ></div> 
                                    </div>                                      
                                   
                                    
                                </div>
                                <!-- /.panel-body -->
                            </div>
                            <!-- /.panel -->
                        </div>
                        <!-- /.col-lg-12 -->
                    </div>
                </div>
            </div>
            <footer class="site-footer">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="row">
                                <div class="col-sm-2">
                                    <a href="about.html" class="about">about us</a>
                                </div>
                                <div class="col-sm-2">
                                    <a href="#" class="contact">contact us</a>
                                </div>
                                <div class="col-sm-4 center1">
                                    <p>Copyright &copy; 2014 by ezops. All rights reserved.</p>
                                </div>
                                <div class="col-sm-4">
                                    <div class="social-icon pull-right">
                                        <ul>
                                            <li><a href="#" class="google"></a></li>
                                            <li><a href="#" class="linkdin"></a></li>
                                            <li><a href="#" class="twitter"></a></li>
                                            <li><a href="#" class="facebook"></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> 
                </div>            
            </footer>
        </div>
        
        
    
    
        
        <!-- Modal Client -->
        <div class="modal fade" id="clientModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Add Client</h4>
                    </div>
                    <div class="modal-body">
                        <form role="form">
                            <div class="form-group">
                                <label for="exampleInputEmail1">First Name</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Last Name</label>
                                <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Last Name">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Profession</label>
                                <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Profession">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Contact No.</label>
                                <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Contact No.">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal Manager -->
        <div class="modal fade" id="ManagerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Add Manager</h4>
                    </div>
                    <div class="modal-body">
                        <form role="form">
                            <div class="form-group">
                                <label for="exampleInputEmail1">First Name</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Last Name</label>
                                <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Last Name">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Profession</label>
                                <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Profession">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Contact No.</label>
                                <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Contact No.">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal Map Funds -->
        <div class="modal fade" id="fundsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Map Funds</h4>
                  </div>
                    <div class="modal-body">
                         <form role="form">
                            
                            <div class="form-group">
                              <div class="fund-section">
                                <h4>Client</h4>
                                <select class="form-control select1" >
                                    <option>ABC</option>
                                    <option>DEF</option>
                                    <option>DEMO</option>
                                </select>
                              </div>
                            </div>
                            <div class="form-group">
                               <div class="fund-section">
                                <h4>Manager</h4>
                                <select class="form-control select1">
                                    
                                    <option>ABC</option>
                                    <option>DEF</option>
                                    <option>DEMO</option>
                                    <option>SARVA</option>
                                </select>
                              </div>
                            </div>
                            <div class="form-group">
                               <div class="fund-section">
                                <h4> Funds</h4>
                                <select class="form-control select1">
                                   
                                    <option>ABC LS Fund</option>
                                    <option>ABC EM Fund</option>
                                    <option>ABC Arb Fund</option>
                                    <option>DEF World Marco Fund</option>
                                    <option>DEMO LS Fund</option>
                                    <option>DEMO Stat Arb Fund</option>
                                </select>
                              </div>
                              <button type="button" class="btn btn-red" id="select-values">Map</button>
                              <div id="result"></div>
                            </div>
                        </form>
                    </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
                </div>
            </div>
        </div>
        <!-- Modal Map Funds -->
        <div class="modal fade" id="tradefundModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Trade Map Funds</h4>
              </div>
                <div class="modal-body">
                   <form role="form">
                        
                        <div class="form-group">
                          <div class="fund-section">
                            <h4>Trade File</h4>
                            <select class="form-control select3">
                              
                                <option value="1">ABC</option>
                                <option value="2">DEF</option>
                                <option value="3">DEMO</option>
                            </select>
                          </div>
                        </div>
                        <div class="form-group">
                           <div class="fund-section">
                            <h4>Data Point</h4>
                            <select class="form-control select3">
                                
                                <option value="1">ABC</option>
                                <option value="2">DEF</option>
                                <option value="3">DEMO</option>
                                <option value="4">SARVA</option>
                            </select>
                          </div>
                        </div>
                        <div class="form-group">
                           <div class="fund-section">
                            <h4>Inbound Mapping</h4>
                            <select class="form-control select3">
                                
                                <option value="1">ABC</option>
                                <option value="2">DEF</option>
                                <option value="3">DEMO</option>
                                <option value="4">SARVA</option>
                            </select>
                          </div>
                        </div>
                        <div class="form-group">
                           <div class="fund-section">
                            <h4>Outbound Mapping</h4>
                            <select class="form-control select3">
                                <option>Funds</option>
                                <option>ABC LS Fund</option>
                                <option>ABC EM Fund</option>
                                <option>ABC Arb Fund</option>
                                <option>DEF World Marco Fund</option>
                                <option>DEMO LS Fund</option>
                                <option>DEMO Stat Arb Fund</option>
                            </select>
                          </div>
                          <button type="button" class="btn btn-red" id="select-values1">Map</button>
                           <div id="result1"></div>
                        </div>
                    </form>
                </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div> 
    </div>

    <div id="loadUploadForms"></div>
    
    

    	<!-- Bottom Scripts -->
    	<script src="<c:url value="/assets/js/gsap/main-gsap.js" />" ></script>
    	<script src="<c:url value="/assets/js/jquery-ui/js/jquery-ui-1.10.3.minimal.min.js" />" ></script>
    	<script src="<c:url value="/assets/js/bootstrap.js" />" ></script>
    	<script src="<c:url value="/assets/js/joinable.js" />" ></script>
    	<script src="<c:url value="/assets/js/resizeable.js" />" ></script>
    	<script src="<c:url value="/assets/js/jquery.dataTables.min.js" /> "></script>
    	<script src="<c:url value="/assets/js/neon-custom.js" />" ></script>
       <link rel="stylesheet" href="<c:url value="/assets/js/daterangepicker/daterangepicker-bs3.css" />" /> 
        <script src="<c:url value="/assets/js/neon-demo.js" />" ></script>
        <script src="<c:url value="/assets/js/neon-api.js" />" ></script>
        <script src="<c:url value="/assets/js/highcharts.js" />" ></script>
        <script src="<c:url value="/assets/js/exporting.js" />" ></script>
        <script src="<c:url value="/assets/js/daterangepicker/moment.min.js" />" ></script>
        <script src="<c:url value="/assets/js/daterangepicker/daterangepicker.js" />" ></script>

        <script type="text/javascript">

            $(".SummeryView").click(function() {
                    document.getElementById('jqxWidget').style.display = 'block';
                    document.getElementById('jqxWidgetsummery').style.display = 'none';               
                
            });
            $(".PassView").click(function() {
                    document.getElementById('jqxWidget').style.display = 'none';
                    document.getElementById('jqxWidgetsummery').style.display = 'block';               
                
            });
            $(".SaveView").click(function() {
                    alert("This View has been saved. ")                
                
            });            

        </script>
        <script type="text/javascript">
            $("#select-values").click(function () {
                var option_all = $(".select1 option:selected").map(function () {
                    return $(this).text();
                }).get().join(' ... ');
                console.log(option_all);
                var heading= 'Selected Mapping: ';            
                $('#result').text(heading + option_all);
            });

            $("#select-values1").click(function () {
                var option_all = $(".select3 option:selected").map(function () {
                    return $(this).text();
                }).get().join(' ... ');
                console.log(option_all);
                var heading= 'Selected Mapping: ';            
                $('#result1').text(heading + option_all);
            });

            function loadForms()
            {
              $("#loadUploadForms").load( "UploadForm" );
        		console.log("Forms loaded");

            	
            }
          
          
          /*------------------------------------------------------------------------------------------
      	 *------------------------------------KNOCKOUT CODE STARTS----------------------------------
      	 *--------------------------------------------------------------------------------------------
      	 */
      var model = model || {};
      var loginUser= ko.observable("");
      //------------------------------------Page Resource Model -------------------------------------

      model.pageData = function(data){
      	var self = this;
      	
      	self.resourceId = ko.observable(data.resourceId);
      	self.resourceType = ko.observable(data.resourceType);
      	self.groupId = ko.observable(data.groupId);
      	self.fileName = ko.observable(data.fileName);
      	
      	return self;
      };

      //------------------------------------Report Model -------------------------------------

      model.reportData = function(data){
      	var self = this;
      	self.reportId = ko.observable(data.reportId);
      	self.fileName = ko.observable(data.fileName);
      	self.category = ko.observable(data.category);
      	self.reportDesc = ko.computed(function(){
      		var reportType = null;
      		switch(data.category){
      			case 'pl': reportType = "P&L Summary";
                  break;
      			case 'recon': reportType = "Reconciliation";
                  break;
      			case 'var': reportType = "Var";
                  break;
      			case 'risk': reportType = "Risk";
                  break;
      			case 'acct': reportType = "Accounting";
                  break;
      			case 'cash': reportType = "Cash";
                  break;
      			case 'trade': reportType = "Trade Report";
                  break;
      			case 'aging': reportType = "Aging Report";
                  break;
      			case 'poscp': reportType = "Positions by CP";
                  break;
      			case 'posprd': reportType = "Positions by Product";
                  break;
      			case 'investor': reportType = "Investor Report";
                  break;
      			default: reportType = "Report";
      		  }
      		return reportType;
      	});
      	
      	
      	
      	
      	self.fileData = ko.observable(data.fileData);
      	self.fileLocation = ko.computed(function(){
      		return data.fileLocation.replace(/\\/g,"/");
      	});
      	self.groupId = ko.observable(data.groupId);
      	self.asOfDate = ko.computed(function(){
      		
      		var date = new Date();
      		date.setTime(ko.toJS(data.asOfDate));
      		
      		return (date.getMonth()+1)+"/"+date.getDate()+"/"+date.getFullYear();
      			
      	});
      	
      	return self;
      };

      //------------------------------------Group Model -------------------------------------
      model.groupData = function(data){
      	var self = this;
      	
      	self.groupId = ko.observable(data.groupId);
      	self.groupName = ko.observable(data.groupName);
      	self.parentGroupId = ko.observable(data.parentGroupId);
      	
      	return self;
      };

      //-------------------------------------Functions Definitions---------------------------
      model.dashboardFunctions = function(){
      	asOfDate = ko.observable();
      	groupList = ko.observableArray();
      	pageList = ko.observableArray();
      	reportListAll = ko.observableArray();
      	reportList = ko.observableArray();
      	reportCheck = ko.observable({'pl':ko.observable(true),
      								'var' : ko.observable(true),
      								'acct':ko.observable(true),
      								'cash':ko.observable(true),
      								'recon':ko.observable(true),
      								'coll':ko.observable(true),
      								'aging':ko.observable(true),
      								'poscp':ko.observable(true),
      								'posprd':ko.observable(true),
      								'trade':ko.observable(true),
      								'risk':ko.observable(true),
      								'investor':ko.observable(true)
      								});
      	    
      	openPdf = function(data){
      		
      		window.open("<c:url value='assets/sampledata/"+ko.toJS(data.fileName)+"' />", '_blank', 'fullscreen=yes');
                  
      		
      	},
      	getAllReport = function()
      	{
      		
      		var cat = null;//" " ; //--p1
      		$.ajax({
      			url: ezopsContextPath+ '/getAllReportIds/${userId}/'+cat+'/'+$("#fromDate").val()+'/'+$("#toDate").val(),
      			type: 'GET',
      	        dataType: 'json',
      			success : function(data){
      			  
      				 var mappedData = $.map(data ,function(row){
      					  
      					  return new model.reportData(row);
      				  }); 
      				  
      				  reportListAll(mappedData);
      				  console.log(ko.toJSON(reportListAll));
      				
      				},
      			error: function(data){

      				 console.log("Error Response Text : "+data);
      					
      				}
      							
      		});

      		
      		
      	},
      	
      	onLoad = function(){


      		loginUser('${userId}');
      		console.log(ko.toJS(loginUser));
      		console.log("-------------------------Getting Lists-------------------------");
      		
      		//-----ajax request to fetch Page list--------------------
          				
      		$.ajax({
      			url: ezopsContextPath+ '/userResources/${userId}/Page',
      			type: 'GET',
      	        dataType: 'json',
      			success : function(data){
      			  
      				 var mappedData = $.map(data ,function(row){
      					  
      					  return new model.pageData(row);
      				  }); 
      				  
      				  pageList(mappedData);
      				  
      				},
      			error: function(data){

      				 console.log("Error Response Text : "+data);
      					
      				}
      							
      		});		
      		
      		//-----ajax request to fetch Reports list--------------------
          		var cat = null;//" " ; //--p1
      		$.ajax({
      			url: ezopsContextPath+ '/getReportIds/${userId}/'+cat,
      			type: 'GET',
      	        dataType: 'json',
      			success : function(data){
      			  
      				 var mappedData = $.map(data ,function(row){
      					  
      					  return new model.reportData(row);
      				  }); 
      				  
      				  reportList(mappedData);
      				  console.log(ko.toJSON(reportList));
      				  asOfDate(ko.toJS(reportList()[0].asOfDate));
      				  console.log(ko.toJS(asOfDate));
      				  setTimeout(function(){
      					  

      					  	$( "#sortable" ).sortable();
      						$( "#sortable" ).disableSelection();
      					  
      				  },500);
      				  
      				},
      			error: function(data){

      				 console.log("Error Response Text : "+data);
      					
      				}
      							
      		});

          	//-----ajax request to fetch GROUP list--------------------
          	$.ajax({
      			url: ezopsContextPath+ '/getAllGroups',
      			type: 'GET',
      	        dataType: 'json',
      			success : function(data){
      			  
      			  
      			  var mappedData = $.map(data ,function(row){
      				  
      				  return new model.groupData(row);
      			  }); 
      			  
      			  groupList(mappedData);
      			  
      			 },
      			 error: function(data){

      				 console.log("Error Response Text : "+data);
      					
      				}
      							
      		});
      		
      	}
      	return{
      		
      		onLoad : onLoad,
      		openPdf : openPdf,
      		getAllReport : getAllReport
      	}	 
      		 
      		 
      	 }(); 
      	 
      	 
       
      ko.applyBindings(model.dashboardFunctions);
      model.dashboardFunctions.onLoad();
      	 /*------------------------------------------------------------------------------------------
      	 *-------------------------------------KNOCKOUT CODE ENDS------------------------------------
      	 *--------------------------------------------------------------------------------------------
      	 */
      			 
      	 
      	 
      	
            	 
      	
          
          
        </script>
        <style>
    a.disabled{
    
    	color:gray;
    	cursor: default;
    }
    
	#sortable { list-style-type: none; width:100%; padding : 0px; margin : 0px;}
	
	
	#sortable li .panel-heading{  cursor : move; }
	
	</style>
    </body>
</html>